<template>
  <div class="msgdetail">
    <v-header :back-display="true">
      <div slot="title">信息详情</div>
    </v-header>

    <div class="msgbox clearfix">
      <div class="msg-item" v-for="(item,index) in list" :key="index" :class="item.identity === 'root'? 'msg-right' : '' ">
        <span>{{item.time}}</span>
        <div class="box-txt">
          <p>{{item.content}}</p>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
import header from '@/components/main/header'

export default {
  name: 'msgdetail',
  components:{
    "v-header": header
  },
  data () {
    return {
      routerId:'',
      list:[
        {time:'2021-4-1 17:20',content:'有人说，初中生活就像一部电影，每天的生活就像一幅幅场景。不断演绎着青春的故事，不断出现着精彩和惊奇。',identity:'boss'},
        {time:'2021-4-1 17:20',content:'有人说，初中生活就像一部电影，每天的生活就像一幅幅场景。不断演绎着青春的故事，不断出现着精彩和惊奇。',identity:'root'},
        {time:'2021-4-1 17:20',content:'有人说，初中生活就像一部电影，每天的生活就像一幅幅场景。不断演绎着青春的故事，不断出现着精彩和惊奇。',identity:'boss'},
      ]
    }
  },
  created () {
    this.routerId=this.$route.params.id;
    console.log('信息列表-->信息详情 id '+this.routerId);
  },
  methods: {},
  mounted () {
  }
}
</script>

<style lang="less" scoped>
.msg-item{
  padding: 20px;width: 76%;float: left;
  span{
    font-size: 14px;color: #666;display: block;
  }
  .box-txt{
    background-color: #f2f2f2;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .13);
    margin-top: 10px;
    p{font-size: 14px;color: #333;line-height: 24px;text-align: justify;}
  }
}
.msg-right{
  float: right;
  span{text-align: right;}
  .box-txt{
    background-color: #4dc86f;
    p{color: #fff;}
  }
}
</style>
